<template>
  <div class="video-page">
    <page-header title="视频中心" :breadcrumb="[{text: '首页', link: '/'}, {text: '新闻资讯', link: '/news'}, {text: '视频中心'}]"></page-header>

    <div class="video-container">
      <div class="section-intro">
        <h2 class="section-title">视频中心</h2>
        <p class="section-desc">通过精彩视频内容，了解我们的企业文化、产品演示、技术分享和行业洞察。</p>
      </div>

      <!-- 视频分类标签 -->
      <div class="video-filters">
        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
          <el-tab-pane label="全部视频" name="all"></el-tab-pane>
          <el-tab-pane label="企业宣传" name="corporate"></el-tab-pane>
          <el-tab-pane label="产品演示" name="product"></el-tab-pane>
          <el-tab-pane label="技术分享" name="tech"></el-tab-pane>
          <el-tab-pane label="活动回顾" name="event"></el-tab-pane>
        </el-tabs>
      </div>
      
      <!-- 视频列表 -->
      <div class="video-content" v-loading="loading">
        <div v-if="filteredVideos.length > 0" class="video-list">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(video, index) in filteredVideos" :key="index">
              <div class="video-card" @click="playVideo(video)">
                <div class="video-thumbnail">
                  <img :src="video.thumbnail" :alt="video.title">
                  <div class="video-duration">{{ video.duration }}</div>
                  <div class="play-overlay">
                    <i class="el-icon-video-play"></i>
                  </div>
                </div>
                <div class="video-info">
                  <h3 class="video-title">{{ video.title }}</h3>
                  <p class="video-desc">{{ video.description }}</p>
                  <div class="video-meta">
                    <span class="video-date">{{ video.date }}</span>
                    <span class="video-views">{{ video.views }}次观看</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          
          <!-- 加载更多按钮 -->
          <div class="load-more" v-if="hasMoreVideos">
            <el-button :loading="loadingMore" @click="loadMoreVideos">加载更多</el-button>
          </div>
        </div>
        
        <el-empty v-else description="暂无相关视频" :image-size="200"></el-empty>
      </div>
    </div>
    
    <!-- 视频播放弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="selectedVideo ? selectedVideo.title : ''"
      width="70%"
      top="5vh"
      destroy-on-close
      class="video-dialog"
    >
      <div v-if="selectedVideo" class="video-player-container">
        <div class="video-player">
          <!-- 实际项目中应使用真实的视频播放器组件 -->
          <img :src="selectedVideo.thumbnail" alt="视频封面" class="placeholder-player">
          <div class="play-button">
            <i class="el-icon-video-play"></i>
          </div>
        </div>
        <div class="video-details">
          <h3>{{ selectedVideo.title }}</h3>
          <div class="video-meta">
            <span class="video-date">发布时间：{{ selectedVideo.date }}</span>
            <span class="video-views">{{ selectedVideo.views }}次观看</span>
          </div>
          <div class="video-description">
            <h4>视频介绍</h4>
            <p>{{ selectedVideo.description }}</p>
          </div>
          <div class="video-tags">
            <el-tag v-for="(tag, index) in selectedVideo.tags" :key="index" size="small" class="video-tag">{{ tag }}</el-tag>
          </div>
        </div>
        
        <!-- 相关视频推荐 -->
        <div class="related-videos">
          <h4>相关推荐</h4>
          <div class="related-list">
            <div 
              v-for="(video, index) in relatedVideos" 
              :key="index" 
              class="related-item"
              @click="playVideo(video)"
            >
              <div class="related-thumbnail">
                <img :src="video.thumbnail" :alt="video.title">
                <div class="related-duration">{{ video.duration }}</div>
              </div>
              <div class="related-info">
                <div class="related-title">{{ video.title }}</div>
                <div class="related-views">{{ video.views }}次观看</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import PageHeader from '../../components/PageHeader.vue'

export default {
  name: 'VideoCenter',
  components: {
    PageHeader
  },
  setup() {
    const activeTab = ref('all')
    const loading = ref(false)
    const loadingMore = ref(false)
    const dialogVisible = ref(false)
    const selectedVideo = ref(null)
    const pageSize = 8
    const currentPage = ref(1)
    
    // 模拟视频数据
    const allVideos = ref([
      {
        id: 1,
        title: '企业宣传片：创新引领未来',
        description: '展示我们企业的发展历程、核心价值观和未来愿景，诠释企业如何通过创新引领行业发展。',
        thumbnail: 'https://picsum.photos/400/225?random=1',
        duration: '03:45',
        date: '2023-10-15',
        views: 12563,
        type: 'corporate',
        tags: ['企业文化', '品牌故事', '发展历程']
      },
      {
        id: 2,
        title: '产品介绍：企业管理系统全功能演示',
        description: '详细展示我们的企业管理系统各项功能和特点，包括人力资源管理、财务管理、客户关系管理等模块。',
        thumbnail: 'https://picsum.photos/400/225?random=2',
        duration: '08:22',
        date: '2023-09-28',
        views: 8721,
        type: 'product',
        tags: ['产品演示', '企业管理', '软件功能']
      },
      {
        id: 3,
        title: '技术分享：大数据在企业中的应用',
        description: '我们的技术专家分享大数据技术如何帮助企业实现精准营销、智能决策和业务优化。',
        thumbnail: 'https://picsum.photos/400/225?random=3',
        duration: '15:36',
        date: '2023-09-10',
        views: 6352,
        type: 'tech',
        tags: ['技术分享', '大数据', '数据分析']
      },
      {
        id: 4,
        title: '2023年度客户交流会回顾',
        description: '回顾2023年度客户交流会的精彩瞬间，包括产品发布、案例分享和未来规划等环节。',
        thumbnail: 'https://picsum.photos/400/225?random=4',
        duration: '12:18',
        date: '2023-08-25',
        views: 5489,
        type: 'event',
        tags: ['活动回顾', '客户交流', '产品发布']
      },
      {
        id: 5,
        title: 'CEO访谈：数字化转型的挑战与机遇',
        description: '我们的CEO分享对数字化转型的见解，解析企业在转型过程中面临的挑战和机遇。',
        thumbnail: 'https://picsum.photos/400/225?random=5',
        duration: '10:42',
        date: '2023-08-10',
        views: 9863,
        type: 'corporate',
        tags: ['CEO访谈', '数字化转型', '企业战略']
      },
      {
        id: 6,
        title: '产品新功能：AI智能助手详解',
        description: '详细介绍我们产品中新增的AI智能助手功能，展示其如何提升工作效率和用户体验。',
        thumbnail: 'https://picsum.photos/400/225?random=6',
        duration: '06:55',
        date: '2023-07-28',
        views: 7256,
        type: 'product',
        tags: ['新功能', 'AI智能', '产品更新']
      },
      {
        id: 7,
        title: '技术解析：区块链在供应链管理中的应用',
        description: '我们的技术专家深入讲解区块链技术如何优化供应链管理流程，提高透明度和安全性。',
        thumbnail: 'https://picsum.photos/400/225?random=7',
        duration: '14:27',
        date: '2023-07-15',
        views: 4152,
        type: 'tech',
        tags: ['区块链', '供应链管理', '技术创新']
      },
      {
        id: 8,
        title: '2023技术峰会精彩回顾',
        description: '回顾我们举办的2023技术峰会的精彩内容，包括前沿技术分享、行业趋势解析和实战案例展示。',
        thumbnail: 'https://picsum.photos/400/225?random=8',
        duration: '20:33',
        date: '2023-06-30',
        views: 6823,
        type: 'event',
        tags: ['技术峰会', '行业趋势', '案例分享']
      },
      {
        id: 9,
        title: '企业文化系列：创新是我们的DNA',
        description: '展示我们如何将创新融入企业文化，打造充满活力和创造力的工作环境。',
        thumbnail: 'https://picsum.photos/400/225?random=9',
        duration: '07:18',
        date: '2023-06-15',
        views: 5427,
        type: 'corporate',
        tags: ['企业文化', '创新精神', '团队建设']
      },
      {
        id: 10,
        title: '产品使用技巧：提升效率的10个小技巧',
        description: '分享10个使用我们产品的实用技巧，帮助用户更高效地完成工作任务。',
        thumbnail: 'https://picsum.photos/400/225?random=10',
        duration: '09:46',
        date: '2023-05-28',
        views: 8912,
        type: 'product',
        tags: ['使用技巧', '效率提升', '用户指南']
      },
      {
        id: 11,
        title: '技术前沿：5G技术如何改变企业通信',
        description: '探讨5G技术的发展及其对企业通信和远程协作的革命性影响。',
        thumbnail: 'https://picsum.photos/400/225?random=11',
        duration: '11:32',
        date: '2023-05-15',
        views: 7251,
        type: 'tech',
        tags: ['5G技术', '企业通信', '远程协作']
      },
      {
        id: 12,
        title: '客户成功案例：XX集团的数字化转型之路',
        description: '详细介绍XX集团如何借助我们的解决方案实现全面数字化转型，提升业务效率和客户满意度。',
        thumbnail: 'https://picsum.photos/400/225?random=12',
        duration: '13:27',
        date: '2023-04-30',
        views: 6348,
        type: 'corporate',
        tags: ['客户案例', '数字化转型', '解决方案']
      },
      {
        id: 13,
        title: '产品路线图分享：2023-2024规划',
        description: '分享我们产品的未来发展规划，包括即将推出的新功能和长期发展方向。',
        thumbnail: 'https://picsum.photos/400/225?random=13',
        duration: '16:43',
        date: '2023-04-15',
        views: 9254,
        type: 'product',
        tags: ['产品规划', '未来发展', '新功能预告']
      },
      {
        id: 14,
        title: '技术沙龙：云原生架构最佳实践',
        description: '我们的架构师分享云原生架构的最佳实践和实施经验，助力企业构建高可用、可扩展的系统。',
        thumbnail: 'https://picsum.photos/400/225?random=14',
        duration: '18:05',
        date: '2023-03-30',
        views: 5127,
        type: 'tech',
        tags: ['云原生', '架构设计', '最佳实践']
      },
      {
        id: 15,
        title: '2023春季产品发布会完整回放',
        description: '完整回放2023春季产品发布会的全过程，包括新产品发布、功能演示和客户见证。',
        thumbnail: 'https://picsum.photos/400/225?random=15',
        duration: '45:22',
        date: '2023-03-15',
        views: 12685,
        type: 'event',
        tags: ['产品发布', '新品上市', '发布会']
      },
      {
        id: 16,
        title: '行业洞察：数字化时代的企业变革',
        description: '深度分析数字化时代企业面临的变革和挑战，探讨如何制定有效的应对策略。',
        thumbnail: 'https://picsum.photos/400/225?random=16',
        duration: '14:36',
        date: '2023-02-28',
        views: 7536,
        type: 'corporate',
        tags: ['行业洞察', '企业变革', '数字化转型']
      }
    ])
    
    // 筛选视频
    const filteredVideos = computed(() => {
      let result = allVideos.value
      
      if (activeTab.value !== 'all') {
        result = result.filter(video => video.type === activeTab.value)
      }
      
      return result.slice(0, currentPage.value * pageSize)
    })
    
    // 是否有更多视频
    const hasMoreVideos = computed(() => {
      const totalFilteredCount = activeTab.value === 'all' 
        ? allVideos.value.length 
        : allVideos.value.filter(video => video.type === activeTab.value).length
        
      return currentPage.value * pageSize < totalFilteredCount
    })
    
    // 相关视频
    const relatedVideos = computed(() => {
      if (!selectedVideo.value) return []
      
      // 获取同类型的其他视频
      return allVideos.value
        .filter(video => video.id !== selectedVideo.value.id && video.type === selectedVideo.value.type)
        .slice(0, 3)
    })
    
    // 切换标签
    const handleTabChange = () => {
      currentPage.value = 1
      loading.value = true
      
      setTimeout(() => {
        loading.value = false
      }, 500)
    }
    
    // 加载更多视频
    const loadMoreVideos = () => {
      loadingMore.value = true
      
      setTimeout(() => {
        currentPage.value += 1
        loadingMore.value = false
      }, 800)
    }
    
    // 播放视频
    const playVideo = (video) => {
      selectedVideo.value = video
      dialogVisible.value = true
    }
    
    // 初始化
    onMounted(() => {
      loading.value = true
      
      setTimeout(() => {
        loading.value = false
      }, 800)
    })
    
    return {
      activeTab,
      loading,
      loadingMore,
      dialogVisible,
      selectedVideo,
      allVideos,
      filteredVideos,
      hasMoreVideos,
      relatedVideos,
      handleTabChange,
      loadMoreVideos,
      playVideo
    }
  },
  metaInfo: {
    title: '视频中心 - 企业门户'
  }
}
</script>

<style scoped>
.video-page {
  padding-bottom: 60px;
}

.video-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-intro {
  margin-bottom: 30px;
}

.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 15px;
  color: #303133;
}

.section-desc {
  text-align: center;
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto 30px;
  color: #606266;
  line-height: 1.8;
}

/* 视频过滤器 */
.video-filters {
  margin-bottom: 30px;
}

/* 视频列表 */
.video-list {
  margin-bottom: 30px;
}

.video-card {
  margin-bottom: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-card:hover .video-title {
  color: var(--el-color-primary);
}

.video-thumbnail {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.video-thumbnail img {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 比例 */
  display: block;
  background-color: #f5f7fa;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 2px;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.play-overlay i {
  font-size: 48px;
  color: #fff;
}

.video-card:hover .play-overlay {
  opacity: 1;
}

.video-info {
  padding: 0 5px;
}

.video-title {
  font-size: 16px;
  margin: 0 0 8px;
  color: #303133;
  line-height: 1.4;
  transition: color 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-desc {
  font-size: 13px;
  color: #606266;
  margin: 0 0 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

/* 加载更多 */
.load-more {
  text-align: center;
  margin-top: 20px;
}

/* 视频播放弹窗 */
.video-player-container {
  display: flex;
  flex-direction: column;
}

.video-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 */
  background-color: #000;
  margin-bottom: 20px;
}

.placeholder-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.play-button i {
  font-size: 30px;
  color: #fff;
}

.video-details {
  margin-bottom: 30px;
}

.video-details h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: #303133;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #909399;
  margin-bottom: 20px;
}

.video-description {
  margin-bottom: 20px;
}

.video-description h4 {
  font-size: 16px;
  margin: 0 0 10px;
  color: #303133;
}

.video-description p {
  font-size: 14px;
  color: #606266;
  line-height: 1.7;
  margin: 0;
}

.video-tags {
  margin-top: 15px;
}

.video-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

/* 相关视频 */
.related-videos {
  margin-top: 20px;
}

.related-videos h4 {
  font-size: 16px;
  margin: 0 0 15px;
  color: #303133;
}

.related-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.related-item {
  width: calc(33.33% - 20px);
  margin: 0 10px 20px;
  cursor: pointer;
}

.related-thumbnail {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.related-thumbnail img {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  display: block;
  object-fit: cover;
}

.related-duration {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 2px;
}

.related-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-views {
  font-size: 12px;
  color: #909399;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .section-title {
    font-size: 26px;
  }
  
  .section-desc {
    font-size: 14px;
  }
  
  .related-item {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .related-item {
    width: 100%;
    margin: 0 0 15px;
  }
  
  .video-dialog {
    width: 95% !important;
  }
}
</style>
